/*
 * Copyright 1999-2018 Alibaba Group Holding Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *      http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import PropTypes from 'prop-types';
import {Button, ConfigProvider, Dialog, Grid, Icon} from '@alifd/next';

import './index.scss';

const {Row, Col} = Grid;

@ConfigProvider.config

class DeleteDialog extends React.Component {
  static displayName = 'DeleteDialog';

  static propTypes = {
    locale: PropTypes.object,
  };

  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      title: '',
      content: '',
      isok: true,
      dataId: '',
      group: '',
    };
  }

  componentDidMount() {
    this.initData();
  }

  initData() {
    const {locale = {}} = this.props;
    this.setState({title: locale.confManagement});
  }

  openDialog(payload) {
    this.setState({
      visible: true,
      title: payload.title,
      content: payload.content,
      isok: payload.isok,
      dataId: payload.dataId,
      group: payload.group,
      message: payload.message,
    });
  }

  closeDialog() {
    this.setState({
      visible: false,
    });
  }

  render() {
    const {locale = {}} = this.props;
    const footer = (
      < div
    style = {
    {
      textAlign: 'right'
    }
  }>
  <
    Button
    type = "primary"
    onClick = {this.closeDialog.bind(this)} >
      {locale.determine}
      < /Button>
      < /div>
  )
    ;
    return (
      < div >
      < Dialog
    visible = {this.state.visible}
    footer = {footer}
    style = {
    {
      width: 555
    }
  }
    onCancel = {this.closeDialog.bind(this)}
    onClose = {this.closeDialog.bind(this)}
    title = {locale.deletetitle}
      >
      < div >
      < Row >
      < Col
    span = {'4'}
    style = {
    {
      paddingTop: 16
    }
  }>
  <
    Icon
    type = {`${this.state.isok ? 'success' : 'delete'}-filling`
  }
    style = {
    {
      color: this.state.isok ? 'green' : 'red'
    }
  }
    size = {'xl'}
    />
    < /Col>
    < Col
    span = {'20'} >
      < div >
      < h3 > {this.state.isok ? locale.deletedSuccessfully : locale.deleteFailed} < /h3>
      < p >
      < span
    style = {
    {
      color: '#999', marginRight
    :
      5
    }
  }>
    Data
    ID:<
    /span>
    < span
    style = {
    {
      color: '#c7254e'
    }
  }>
    {
      this.state.dataId
    }
  <
    /span>
    < /p>
    < p >
    < span
    style = {
    {
      color: '#999', marginRight
    :
      5
    }
  }>
    Group:<
    /span>
    < span
    style = {
    {
      color: '#c7254e'
    }
  }>
    {
      this.state.group
    }
  <
    /span>
    < /p>
    {
      this.state.isok ? '' :
    <
      p
      style = {
      {
        color: 'red'
      }
    }>
      {
        this.state.message
      }
    <
      /p>}
      < /div>
      < /Col>
      < /Row>
      < /div>
      < /Dialog>
      < /div>
    )
    ;
  }
}

export default DeleteDialog;
